<template>
  <div v-loading="loading">
    <div class="notice-list-header">
      <!-- <i-tabs
        type="card"
        v-model="activeName"
        :tabs="tabs"
        @tab-click="handleClickTabs"
      /> -->
      <MessageTabs
        :tabs="tabs.filter((tab) => tab.ifRender())"
        :activeIndex="activeName"
        @tabclick="handleClickTabs"
      />
      <el-button
        v-if="['MERCHANT'].includes(roleType)"
        icon="el-icon-setting"
        type="success"
        class="message-settings"
        @click="goSmsSet"
      >
        短信设置
      </el-button>
    </div>
    <template v-for="item in list">
      <div class="hycmessage-table-items" :key="item.id">
        <MessagePanel :item="item" :type="activeName" />
      </div>
    </template>
    <div>
      <el-pagination
        v-if="totalAmount != null"
        layout="prev, pager, next"
        :total="totalAmount"
        @current-change="handleChangePage"
        :current-page.sync="currentPage"
        :page-size="pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import MessagePanel from './MessagePanel'
import { getMessages, selectHycMessagePage } from '@/api/login'
import { typeMap } from '@/utils/format'
import MessageTabs from '@/components/MessageTabs'
import dayjs from 'dayjs'

export default {
  name: 'hycMessageTable',
  components: { MessagePanel, MessageTabs },
  data() {
    return {
      activeName: null,
      tabs: [
        {
          label: '设备消息',
          name: typeMap.messageType.WARNING,
          ifRender: () => ['MERCHANT'].includes(this.roleType),
        },
        {
          label: '活动通知',
          name: typeMap.messageType.ORDER,
          ifRender: () => ['MERCHANT'].includes(this.roleType),
        },
        // {
        //   label: '小易通知',
        //   name: typeMap.messageType.XY_MESSAGE,
        //   ifRender: () => ['MERCHANT'].includes(this.roleType),
        // },
        {
          label: '分账预警',
          name: typeMap.messageType.SHARE_ALARM,
          ifRender: () => ['ADMIN'].includes(this.roleType),
        },
      ],
      loading: false,
      pageSize: 5,
      currentPage: 1,
      totalAmount: null,
      list: [],
    }
  },
  props: {},
  computed: {
    roleType() {
      return this.$store.getters.roleType
    },
  },
  mounted() {
    this.activeName =
      this.roleType === 'MERCHANT'
        ? typeMap.messageType.ORDER
        : typeMap.messageType.SHARE_ALARM
    this.initFromSearch()

    let readStatus = this.$store.getters.readStatus
    this.tabs = [
      {
        label: '设备消息',
        name: typeMap.messageType.WARNING,
        unRead: readStatus.alarmMessageRead,
        ifRender: () => ['MERCHANT'].includes(this.roleType),
      },
      {
        label: '活动通知',
        name: typeMap.messageType.ORDER,
        unRead: readStatus.billMessageRead,
        ifRender: () => ['MERCHANT'].includes(this.roleType),
      },
      // {
      //   label: '小易通知',
      //   name: typeMap.messageType.XY_MESSAGE,
      //   unRead: readStatus.hycMessageRead,
      //   ifRender: () => ['MERCHANT'].includes(this.roleType),
      // },
      {
        label: '分账预警',
        name: typeMap.messageType.SHARE_ALARM,
        ifRender: () => ['ADMIN'].includes(this.roleType),
      },
    ]
  },
  methods: {
    getList(activeName) {
      if (activeName === typeMap.messageType.XY_MESSAGE) {
        this.getHycMesageList()
      } else {
        this.getMessageList()
      }
    },
    handleClickTabs(item) {
      this.ressetTableParams()
      this.$router.push({
        path: '/myself/noticeList',
        query: {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          activeName: item.name,
        },
      })

      this.activeName = item.name
      this.setTabsStatus(this.activeName)
      this.getList(item.name)
    },
    setTabsStatus(name) {
      const findIndex = this.tabs.findIndex((item) => item.name === name)

      if (findIndex < 0) return

      this.$set(this.tabs, findIndex, {
        ...this.tabs[findIndex],
        unRead: false,
      })
    },
    goSmsSet() {
      this.$router.push('/myself/smsSet')
    },
    initFromSearch() {
      let qObj = this.$route.query
      if (qObj.currentPage) {
        this.currentPage = parseInt(qObj.currentPage, 10)
      }

      if (qObj.pageSize) {
        this.pageSize = parseInt(qObj.pageSize, 10)
      }

      if (qObj.activeName) {
        this.activeName = qObj.activeName
      }

      this.getList(this.activeName)
    },
    handleChangePage(val) {
      this.currentPage = val
      this.getList(this.activeName)
      this.$router.push({
        path: '/myself/noticeList',
        query: {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          activeName: this.activeName,
        },
      })
    },
    ressetTableParams() {
      this.pageSize = 5
      this.currentPage = 1
    },
    getHycMesageList() {
      this.loading = true
      selectHycMessagePage({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      })
        .then((res) => {
          this.list = res.list

          this.totalAmount = res.totalAmount
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getMessageList() {
      this.loading = true
      getMessages({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        type: parseInt(this.activeName, 10),
      })
        .then((res) => {
          res.list.forEach((item) => {
            item.createTime = item.createTime
              ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
              : item.createTime
          })
          this.list = res.list

          this.totalAmount = res.totalAmount
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.hycmessage-table-items {
  padding-top: 20px;
  padding-bottom: 10px;
}

.notice-list-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-top: 5px;
}
</style>
